<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form class="layui-form" lay-filter="myform" id="myform">
                    <input type="reset" id="btReset" class="layui-hide" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">考试专业</label>
                        <div class="layui-input-inline">
                            <select name="majorId" id="majorId"></select>
                        </div>
                        <label class="layui-form-label">科目</label>
                        <div class="layui-input-inline">
                            <input type="text" id="categoryName" name="categoryName" autocomplete="off" class="layui-input" select>
                            <input type="hidden" id="categoryId" name="categoryId">
                        </div>
                        <label class="layui-form-label">考生年级</label>
                        <div class="layui-input-inline">
                            <div id="grade" class="xm-select-demo" style="z-index:999"></div>
                        </div>
                        <label class="layui-form-label">考试学年</label>
                        <div class="layui-input-inline">
                            <div id="gradeYear" class="xm-select-demo" style="z-index:999"></div>
                        </div>

                    </div>
                    <div class="layui-form-item" style="text-align: center">
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-primary" data-type="query"><i class="layui-icon">&#xe615;</i>查询</button>
                                <button type="button" class="layui-btn layui-btn-primary" data-type="resetBtn"><i class="layui-icon">&#xe669;</i>重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <table class="layui-hide"  id="main-table" lay-filter="main-table"></table>
            </div>
        </div>
    </div>
</div>
<script src="layuiadmin/plugins/xm-select/xm-select.js"></script>
<script th:inline="none"></script>
<script>
    layui.link('layuiadmin/plugins/layui_complete-master/autocomplete.css');
    layui.extend({
        autocomplete: '{/}layuiadmin/plugins/layui_complete-master/autocomplete'
    });
    var grade = xmselect('grade/getPageList?limit=30&page=1' , 'grade' ,{key:"id",text:"name"});
    var gradeYear = xmselect('gradeYear/getPageList?limit=30&page=1' , 'gradeYear' ,{key:"id",text:"name"});
    layui.use(['table','form','autocomplete'], function(){
        var table = layui.table,
            autocomplete = layui.autocomplete,
            form = layui.form;
        select('major/getPageList?limit=30&page=1' , 'majorId',form,'name','id')
        setAutocomplete('libCategory/getPageList?page=1&limit=20',autocomplete,"categoryName",'{{d.name}}','{{d.name}}',"setMajor");
        window.setMajor = function(data){
            $("#categoryId").val(data.id);
            $("#categoryName").val(data.name);
        }
        table.render({
            elem: '#main-table'
            ,height: (top.height-85)+'px'
            ,url: 'paper/getPageList'
            ,where:{state:2}
            ,title: '试卷列表'
            ,page: true
            ,cols: [
                [
                    {type: 'checkbox'}
                    ,{field: 'name', title: "试卷名称",width:210}
                    ,{field: 'majorName',title: "考试专业",width:160}
                    ,{field: 'categoryName',title: "考试科目",width:160}
                    ,{field: 'collegeName',title: "学院/系",width:150}
                    ,{field: 'gradeName',title: "考生年级",width:90}
                    ,{field: 'majorName',title: "考试学年",width:200,templet:function (d){
                        return d.gradeYearName + d.semesterTxt;
                    }}
                    ,{field: 'howlong', title: "考试时长",width:90}
                    ,{field: 'createTime', title: "登记时间",width:170}
                ]
            ]
            ,done:function(){
                enableRowClick(table,form,'main-table',"main-table");
            }

        });
        var $ = layui.$, active = {
            query: function(){
                var gradeArr = grade.getValue();
                var gradeCodes = gradeArr.map(x=>x.value);
                gradeCodes = gradeCodes.join(",");
                var gradev = gradeCodes;
                var gradeYearArr = gradeYear.getValue();
                var gradeYearCodes = gradeYearArr.map(x=>x.value);
                gradeYearCodes = gradeYearCodes.join(",");
                var gradeYearv = gradeYearCodes;
                table.reload("main-table",{where:{name:$("#name").val(),gradeYear:gradeYearv,grade:gradev
                        ,major:$("#majorId").val(),categoryId:$("#categoryId").val()
                    }})
            },
            resetBtn:function () {
                $("#btReset").click();

            }
        };
        $('.layui-form .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        window.getIds = function (){
            var checkStatus = table.checkStatus('main-table');
            let data = checkStatus.data;
            if(data.length==0){
                return layer.msg("请选择试卷");
            }
            let idnames = [];
            for(var i=0;i<data.length;i++){
                idnames.push({id:data[i].id,name:data[i].name});
            }
            return idnames;
        }
    });

</script>
</body>
</html>